<!DOCTYPE html>
<html lang="en">
	<head>
		<script src="libs/kinetic-v3.8.5.js"></script>
		<script src="libs/jquery-1.7.2.js"></script>
		<script src="representation/Class.js"></script>
		<script src="representation/Member.js"></script>
		<script src="representation/MemberArray.js"></script>
		<script src="representation/RelationObj.js"></script>
		<script src="representation/RelationObjArray.js"></script>
		<script src="shapes/BasicShape.js"></script>
		<script src="shapes/ClassShape.js"></script>
		<script src="shapes/ShapeArray.js"></script>
		<script src="shapes/Relation.js"></script>
		<script src="shapes/RelationArray.js"></script>
		<script src="shapes/UniRelation.js"></script>
		<script src="shapes/GeneralizationRelation.js"></script>
		<script src="shapes/UnderConstructionRelation.js"></script>
		<script src="Styles/shapeColors.js"></script>
		<script src="userStageActions/UMLCanvas.js"></script>
		<script src="userStageActions/ViewManager.js"></script>
		<script src="userStageActions/treeHelper.js"></script>
		<link rel="stylesheet" href="libs/jqwidgets/styles/jqx.base.css" type="text/css" />
		<link rel="stylesheet" href="libs/jqwidgets/styles/jqx.summer.css" type="text/css" />
		<link rel="stylesheet" href="Styles/pageLayout.css" />
		<script type="text/javascript" src="libs/jqwidgets/jqxcore.js"></script>
		<script type="text/javascript" src="libs/jqwidgets/jqxbuttons.js"></script>
		<script type="text/javascript" src="libs/jqwidgets/jqxscrollbar.js"></script>
		<script type="text/javascript" src="libs/jqwidgets/jqxpanel.js"></script>
		<script type="text/javascript" src="libs/jqwidgets/jqxtree.js"></script>
		<script type="text/javascript" src="libs/jqwidgets/jqxcheckbox.js"></script>
		<script type="text/javascript" src="libs/jqwidgets/jqxmenu.js"></script>
		<script>
			var can;
			window.onload = function() {
				var classObj1 = new Class("class1");
				var classObj2 = new Class("class2");
				var test1 = new ClassShape(30, 200, classObj1);
				var test2 = new ClassShape(200, 30, classObj2);
				var can = new ViewManager("canvasContainer", 1300, 1000);

				// var can = new UMLCanvas("canvasContainer", 1300, 1000);
				// canvasVar = can;
				can.addClass(test1);
				can.addClass(test2);
				//
				can.update();
				//
				can.addView("SecondView");
				var classObj3 = new Class("class3");
				var test3 = new ClassShape(100, 100, classObj3);
				can.addClass(test3);
				var test4 = new ClassShape(100, 100, classObj2);
				can.addClass(test4);

				$('input#change').click(function(event) {
					if(can.currentView.name == "MainView") {
						can.switchView("SecondView");
					} else {
						can.switchView("MainView");
					}
					// test("FirstClass");

				});
			};

		</script>
		<script type="text/javascript"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				var theme = '';
				// Create jqxTree
				$('#project_jqxTree').jqxTree({
					height : '200px',
					width : '195px'
					// theme : theme
				});
				$('#view_jqxTree').jqxTree({
					height : '200px',
					width : '195px'
					// theme : theme
				});

			});

		</script>
		<title> Demo Canvas</title>
	</head>
	<body>
		<div id="header">
<!-- 			<input type="button" value="change" id="change" /> -->
		</div>
		<div id="container">
			<div id="center" class="column">
				<div id="canvasContainer" style="{float: right;}"></div>
			</div>
			<div id="left" class="column">
				Classes
				<div id='project_jqxTree' >
					<ul></ul>
				</div>
				<div id='jqxMenu'>
					<ul>
						<li>
							Add To View
						</li>
						<li>
							Remove
						</li>
					</ul>
				</div>
				<br />
				Views
				<div id='view_jqxTree' >
					<ul></ul>
				</div>
			</div>
			<div id="right" class="column"></div>
		</div>
		<div id="footer"></div>
	</body>
</html>
